<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/website/common/base.jsp"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${webname }-意见反馈</title>
<%@ include file="/website/common/common.jsp"%>
<link href="${webctx }/css/manage.css" rel="stylesheet" type="text/css" />
<link href="${webctx }/css/order.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx}/plugins/plupload2/plupload.full.min.js"></script>
<script type="text/javascript" src="${ctx}/plugins/oss/upload.js"></script>

</head>

<style>
	.idea-pic .close {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10;
		width: 30px;
		height:30px;
		background: #ff6767 url("${webctx}/images/ico-cross-white.png") center no-repeat;
		border-radius:100%;
	}
	.idea-pic .pl_upimgdiv{
		width:144px;
		height:144px;
	}
	.idea-pic .pl_upimgdiv img{
		width:144px;
		height:144px;
	}
</style>

<body>
<%@ include file="/website/common/top.jsp"%>
<%@ include file="/website/common/head.jsp"%>
<%@ include file="/website/common/menu.jsp"%>

<div class="warp-body">
	<div class="inner clearfix">
    	<div class="left-main">
        	<div class="left-inner">
            	<%@ include file="/website/user/left.jsp"%>
            </div>
        </div>
    	<div class="right-main">
        	<div class="right-inner"  id="condiv">
            	<div class="right-title"><span></span>意见反馈</div>
                <div class="help-inner">           	  	
                    <div class="idea-inner">
                    	<textarea name="content" maxlength="500" cols="" rows="" class="idea-txt" placeholder="输入您对我们网站的意见与建议,限定输入500字。"></textarea>
                    </div>
                    <div class="idea-pic clearfix">
                    	<div id="btnspan" style="cursor:pointer;padding: 20px 20px;">
                        	<img src="${webctx }/images/addimg.png" width="100" height="100" id="imgbtn" />
                        </div>
                    </div>
                    <div class="idea-inp">
                    	联系方式：<input type="text" id="phone" name="phone" value="${phone }">
                    </div>
                    <div class="edit-papers-btn" style="margin-top: -17px;">
                    	<button onclick="tosubmit()">提 交</button>
                    </div>
                    
                    
                </div>    	
                
            </div>
            <div class="right-inner hide" id="msgdiv">
            	<div class="orderinfo">
					<div class="right-title"><span></span>意见反馈</div>
					<div class="line8"></div>
					<div class="fl">
						<span class="thokimg"><img src="${webctx }/images/ok_y.png"></span>
					</div>
					<div class="thoktxt">
						<div class="line8"></div><div class="line8"></div>
						<p class="p1" >感谢您的意见与建议！</p>
					</div>
				</div>
            </div>
        </div>
    </div>
</div>

<%@ include file="/website/common/foot.jsp"%>
</body>
</html>
<script>
var uploader;


$(function(){
	var plparm={
			runtimes : 'html5,flash,silverlight,html4',
			browse_button :"imgbtn",
		    multi_selection: false,
			flash_swf_url : ctx+'/plugins/plupload2/Moxie.swf',
			silverlight_xap_url : ctx+'/plugins/plupload2/Moxie.xap',
		    url : '',
		    filters: {
				max_file_size : '500kb',
				prevent_duplicates :false, //不允许选取重复文件
			  	mime_types : [ //只允许上传图片文件
			    { title : "图片文件", extensions : "jpg,png,jpeg,gif" }
			  	]
			},
			init: {
				FilesAdded: function(up, files) {
//					if(up.files.length>1)
//						up.removeFile(up.files[0]);
						if(files.length>0)pedit_prewn--;
                        for (var i = 0; i < files.length; i++) {
                            pedit_loadfs.push(files[i]);
                            var html = "<div class='pl_upimgdiv' id='img_" + files[i].id + "'><img src='" + ctx + "/images/imgloading.png'/><input name='photo' type='hidden'/> <div class='progressbg'></div><div class='progresstxt'></div><div class=\"close\" onclick=\"javascript:deleteImg(this)\"></div></div>";
//						$("#btnspan").prev().remove();
                            $("#btnspan").before(html);
                            pedit_loadprew();
//                            $oss.previewImageOne(files[i], function (src) {
//                                $("img", $('#img_' + files[i].id)).attr("src", src);
//                            })
                        }

				},UploadFile:function(up,file){
					var f=$('#img_'+file.id);
					$(".progresstxt",f).show();
				},UploadProgress:function(up,file){
					var f=$('#img_'+file.id);
					var d=$(".progressbg",f);
					var w=f.width()*parseInt(file.percent)/100;
					d.css("width",w+"px");
					$(".progresstxt",f).html(file.percent+"%");
				},FileUploaded:function(up,file,responseObject){
					var re=jQuery.parseJSON(responseObject.response);
					$("input",$('#img_'+file.id)).val(re.fileid);
				},UploadComplete:function(){
					tosave();
				}
			}
	}
	$oss.setUpDir("feedback");
	uploader=$oss.initUpload(plparm);
    setLeftCur("feedback");
    phoneTrim();


})
function deleteImg(obj){
    $(obj).parents('.pl_upimgdiv').remove();
}

var pedit_loadfs=[];
var pedit_fr;
var pedit_prewn=0;
function previewImages(file,callback){
    if(!file || !/image\//.test(file.type)) return;
    if(file.type=='image/gif'){
        var fr = new mOxie.FileReader();
        fr.onload = function(){
            callback(fr.result);
        }
        fr.readAsDataURL(file.getSource());
    }else{
        var preloader = new mOxie.Image();
        preloader.onload = function() {
            preloader.downsize( 100, 100 );
            var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL();
            callback && callback(imgsrc);
            preloader.destroy();
            preloader = null;
        };
        preloader.load( file.getSource() );
    }
}
//生成预览图
function pedit_loadprew(){
    pedit_prewn++;
    if(pedit_prewn<pedit_loadfs.length){
        previewImages(pedit_loadfs[pedit_prewn],function(imgsrc){
            $("img",$("#img_"+pedit_loadfs[pedit_prewn].id)).attr('src',imgsrc);
            if(pedit_fr){
                pedit_fr.destroy();
                pedit_fr = null;
            }
            pedit_loadprew();
        })
    }
}
var subing=false;
function tosubmit(){
    var phoneLayout ='';
	if($("[name='content']").val()==''){
		alert("请填写您的意见与建议");
		return;
	}
	if($("[name='phone']").val() =='') {
	    alert('请输入手机号码')
		return;
	}
	if(!$w.isMobile($("[name='phone']").val())) {
        alert('请输入正确的手机号')
        return;
	}
	if(!subing){
		subing=true;

		if(uploader.files.length>0)uploader.start();
		else tosave();
	}
}
//为手机号码去空格
function phoneTrim() {
	var phone = $("[name='phone']").val();
	var phoneTo = $.trim(phone);
    $("[name='phone']").val(phoneTo);


}
function tosave(){
    var plimgs = [];
    var itr = $(".idea-pic .pl_upimgdiv input");
    for(var i = 0; i < itr.length; i++){
        plimgs.push(itr.eq(i).attr("value"));
    }

    if(plimgs.length >6){
        alert("图片不能超过6张");
        subing=false;
		return;
	}
	$w.httpRequest({
		url:apiroot+"/user/feedbackwrite",
		data:{"phone":$("[name='phone']").val(),"content":$("[name='content']").val(),"photoids":plimgs},
		ok:function(ret){
			$("#condiv").hide();
			$("#msgdiv").show();
			$(window).scrollTop(80);
		},all:function(){subing=false;}
	})
}
</script>